<template>
  <div class="standalone-test">
    <h1>独立Vue测试页面</h1>
    <p>这个页面不依赖App.vue的复杂布局</p>
    <p>当前时间: {{ currentTime }}</p>
    <p>Vue版本: {{ vueVersion }}</p>
    <p>浏览器: {{ userAgent }}</p>
    
    <div class="test-buttons">
      <button @click="testAlert">测试Alert</button>
      <button @click="testConsole">测试Console</button>
      <button @click="testLocalStorage">测试LocalStorage</button>
    </div>
    
    <div class="test-results">
      <h3>测试结果:</h3>
      <div v-for="(result, index) in testResults" :key="index" :class="result.type">
        {{ result.time }}: {{ result.message }}
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const currentTime = ref('')
const vueVersion = ref('Vue 3.x')
const userAgent = ref('')
const testResults = ref([])

onMounted(() => {
  currentTime.value = new Date().toLocaleString()
  userAgent.value = navigator.userAgent
  
  addResult('独立Vue页面加载成功', 'success')
  console.log('独立Vue页面加载成功')
})

const addResult = (message, type = 'info') => {
  testResults.value.push({
    time: new Date().toLocaleTimeString(),
    message,
    type
  })
}

const testAlert = () => {
  try {
    alert('Alert测试成功')
    addResult('Alert测试成功', 'success')
  } catch (error) {
    addResult(`Alert测试失败: ${error.message}`, 'error')
  }
}

const testConsole = () => {
  try {
    console.log('Console测试成功')
    addResult('Console测试成功', 'success')
  } catch (error) {
    addResult(`Console测试失败: ${error.message}`, 'error')
  }
}

const testLocalStorage = () => {
  try {
    localStorage.setItem('test', 'test-value')
    const value = localStorage.getItem('test')
    localStorage.removeItem('test')
    addResult(`LocalStorage测试成功: ${value}`, 'success')
  } catch (error) {
    addResult(`LocalStorage测试失败: ${error.message}`, 'error')
  }
}
</script>

<style>
body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
  background-color: #f5f5f5;
}

.standalone-test {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

h1 {
  color: #333;
  text-align: center;
}

p {
  margin: 10px 0;
  padding: 5px;
  background: #f5f5f5;
  border-radius: 4px;
}

.test-buttons {
  margin: 20px 0;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

button {
  padding: 10px 20px;
  background: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background: #0056b3;
}

.test-results {
  margin-top: 20px;
  padding: 15px;
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 4px;
}

.success {
  color: #28a745;
  margin: 5px 0;
}

.error {
  color: #dc3545;
  margin: 5px 0;
}

.info {
  color: #17a2b8;
  margin: 5px 0;
}
</style> 